    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>事件绑定与解绑兼容写法</title>
        <style>
            *{
                margin:0;
                padding: 0;
                text-align: center;
                margin-top: 20px;
            }
            button{
                width: 100px;
                height: 40px;
                background-color: #7AB800;
                line-height: 40px;
                font-size: 24px;
            }
        </style>
    </head>
    <body>
     <button>点击</button>
    </body>
    <script>
         var btn=document.getElementsByTagName("button")[0];
         //兼容式写法

         EventListener={
             addEvent:function (ele,fn,str) {
                 if (ele.addEventListener){
                     ele.addEventListener(str,fn);
                 }else if (ele.attachEvent){
                     ele.attachEvent("on"+str,fn);
                 }else {
                     ele["on"+str]=fn;
                 }
             },
             removeEvent:function (ele,fn,str) {
                 if (ele.removeEventListener){
                     ele.removeEventListener(str,fn);
                 }else if (ele.detachEvent){
                     ele.detachEvent("on"+str,fn);
                 }else {
                     ele["on"+str]=null;
                 }
             }
         };
         EventListener.addEvent(btn,fn4,"click");
         EventListener.addEvent(btn,fn5,"click");
//         EventListener.addEvent(btn,fn6,"click");
//         EventListener.removeEvent(btn,fn4,"click");
//         EventListener.removeEvent(btn,fn5,"click");
//         EventListener.removeEvent(btn,fn6,"click");
         function fn4() {
             console.log("兼容式1！");
         }
         function fn5() {
             console.log("兼容式have2！");
         }
         function fn6() {
             console.log("兼容式have3！");
         }

    </script>
    </html>